<script setup lang="ts">
import {PAY_TYPE} from "~/const/Maps";
import {useLoginStore} from "~/stores/login";
definePageMeta({
  title:'一口价域名列表',
  layout:'admin'
})
const time=ref([]);
const form=reactive({
  limit:20,
  page:1,
  name:'',//模糊搜索-域名
});
const {data:list,refresh}=await useServerGet('/fp/getDomainGoodsList',form)
const search=()=>{
  refresh&&refresh();
}
const login=useLoginStore()
const buy=async (row:any)=>{
    const {code}=await usePost('/fp/buyDomain',{id:row.id})
    if(code===200){
      ElMessage.success('购买成功')
      login.refreshInfo();
      refresh&&refresh();
    }
}
</script>

<template>
<div>
  <el-card>
    <div class="flex">
      <div class="w-52 mr-2">
        <el-input placeholder="请输入域名" v-model="form.name" class="w-40" clearable></el-input>
      </div>
      <div class="w-20">
        <el-button type="primary" @click="search">搜索</el-button>
      </div>
    </div>
  </el-card>
  <el-card class="mt-4">
    <el-table :data="list.data.list" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" class="h-[620px] overflow-auto">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="domain" label="域名" min-width="150">
        <template #default="{row}">
          <div class="flex">
            {{row.domain}}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="长度">
        <template #default="{row}">
          <span>{{row.domain.endsWith('.com.cn')?row.domain.split('.').slice(0,-2).join('.').length:row.domain.split('.').slice(0,-1).join('.').length}}</span>
        </template>
      </el-table-column>
      <el-table-column label="域名属性" width="600">
        <template #default="scope" >
          <div v-if="scope.row.domain_info?.domain">
            <div class="grid grid-cols-5 gap-[1] text-xs text-blue-400"><span >PC_BR：{{scope.row?.domain_info?.pc_br}}</span><span>PC收录：{{scope.row?.domain_info?.pc_sum}}</span><span>M_BR：{{scope.row?.domain_info?.m_br}}</span><span>M收录：{{scope.row?.domain_info?.m_sum}}</span>
              <el-tooltip content="PC最大权重" placement="top" effect="dark">
                <template #content>
                  <el-form class="w-max mx-auto my grid grid-cols-2" label-suffix=": " label-width="120" inline label-position="left">
                    <el-form-item label="域名">
                      {{scope.row?.domain_info?.domain}}
                    </el-form-item>
                    <el-form-item label="PC权重">
                      {{scope.row?.domain_info?.pc_br}}
                    </el-form-item>
                    <el-form-item label="PC最大权重">
                      {{scope.row?.domain_info?.pc_br_max}}
                    </el-form-item>
                    <el-form-item label="PC最大收录">
                      {{scope.row?.domain_info?.pc_nums_max}}
                    </el-form-item>
                    <el-form-item label="PC最大收录时间">
                      {{scope.row?.domain_info?.pc_max_time}}
                    </el-form-item>
                    <el-form-item label="PC最小权重">
                      {{scope.row?.domain_info?.pc_br_min}}
                    </el-form-item>
                    <el-form-item label="PC最小收录">
                      {{scope.row?.domain_info?.pc_nums_min}}
                    </el-form-item>
                    <el-form-item label="PC最小收录时间">
                      {{scope.row?.domain_info?.pc_min_time}}
                    </el-form-item>
                    <el-form-item label="移动权重">
                      {{scope.row?.domain_info?.m_br}}
                    </el-form-item>
                    <el-form-item label="移动最大权重">
                      {{scope.row?.domain_info?.m_br_max}}
                    </el-form-item>
                    <el-form-item label="移动最大收录">
                      {{scope.row?.domain_info?.m_nums_max}}
                    </el-form-item>
                    <el-form-item label="移动最大收录时间">
                      {{scope.row?.domain_info?.m_max_time}}
                    </el-form-item>
                    <el-form-item label="移动最小权重">
                      {{scope.row?.domain_info?.m_br_min}}
                    </el-form-item>
                    <el-form-item label="移动最小收录">
                      {{scope.row?.domain_info?.m_nums_min}}
                    </el-form-item>
                  </el-form>
                </template>
                <el-icon-question-filled class="w-4 h-4">?</el-icon-question-filled>
              </el-tooltip>
            </div>
          </div>
          <div v-else>
            -
          </div>

        </template>
      </el-table-column>

      <el-table-column prop="price" label="价格"></el-table-column>
<!--      <el-table-column prop="user_phone" label="手机号"></el-table-column>-->
<!--      <el-table-column prop="synopsis" label="域名简介"></el-table-column>-->
      <el-table-column prop="register_time" label="注册时间"></el-table-column>
      <el-table-column prop="expiration_time" label="到期时间"></el-table-column>
      <el-table-column prop="updated_at" label="更新时间"></el-table-column>
      <el-table-column prop="created_at" label="创建时间"></el-table-column>
      <el-table-column label="操作列表">
        <template #default="{row}">
          <el-button type="primary" @click="buy(row)">购买</el-button>
        </template>
      </el-table-column>
    </el-table>

    <MyPage v-model:page="form.page" v-model:perpage="form.limit" v-model:total="list.data.total" @change="refresh"></MyPage>
  </el-card>
</div>
</template>

<style scoped lang="scss">

</style>